<template>
    <div class="photo-box">
        <div class="show-box">
            <span class="left"></span>
            <span class="englishText">List people</span>
            <span class="text">列表人物</span>
            <span class="right"></span>
        </div>
        <div class="show-content">
            <div class="photo-left">
                <div>
                    <div class="tuijian-top">
                        <h1>推荐</h1>
                        <div class="line"></div>
                    </div>
                    <div class="photo-empty"></div>
                    <div class="photo-english">RECOMMENDED</div>
                    <div class="lis"  v-for="(item,index) in photoList" :key="index+'+'" @click="changeImg(item.imgSrc)">
                        <p>{{ item.name }}</p>
                        <i class="el-icon-arrow-right"></i>
                    </div>
                </div>
            </div>
            <div class="photo-right">
                <div class="animated bounceIn">
                    <img :src="classShow1" alt="">
                </div>
            </div>
        </div>
        <div class="content-border"></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                classShow1: require("../../assets/h7_1.jpg"),
                photoList: [{
                    name: "卡莉·克劳斯",
                    imgSrc: require("../../assets/h7_1.jpg")
                },{
                    name: "宋妍霏",
                    imgSrc: require("../../assets/h2.jpg")
                },{
                    name: "刘雯",
                    imgSrc: require("../../assets/h3.jpg")
                },{
                    name: "金泫雅",
                    imgSrc: require("../../assets/h1.jpg")
                },{
                    name: "胡歌",
                    imgSrc: require("../../assets/h4_1.jpg")
                },{
                    name: "易烊千玺",
                    imgSrc: require("../../assets/h5_1.jpg")
                },{
                    name: "吴磊",
                    imgSrc: require("../../assets/h6_1.jpg")
                },{
                    name: "王一博",
                    imgSrc: require("../../assets/h8_1.jpg")
                }]
            }
        },
        methods: {
            changeImg(val) {
                this.classShow1 = val
            }
        }
    }
</script>

<style scoped>
    .content-border {
        width: 100%;
        height: 5px;
        background: #efefec;
        margin: 80px 0px;
    }
    .photo-english{
        text-align: left;
        font-size: 30px;
        color: rgb(248, 85, 85);
        margin-bottom: 40px;
        margin-top: 10px;
    }
    .lis {
        width: 100%;
        height: 58px;
        border-top: 1px solid rgb(199, 198, 198);
        cursor: pointer;
    }
    .lis p {
        width: 90%;
        display: inline-block;
        text-align: left;
        font-size: 24px;
        line-height: 58px;
    }
    .photo-empty::after {
        content: "";
        display: block;
        clear: both;
    }
    .tuijian-top h1 {
        float: left;
        font-size: 30px;
        font-family: "宋体";
    }
    .line {
        float: left;
        width: 80%;
        height: 2px;
        background: rgb(134, 134, 134);
        margin-top: 16px;
        margin-left: 3%;
    }

    .photo-left {
        width: 38%;
        float: left;
        /* border: 1px solid #000; */
        margin-right: 1%;
    }
    .photo-right {
        width: 60%;
        float: left;
        /* border: 1px solid #000; */
    }
    .photo-right div {
        width: 100%;
    }
    .photo-right div img {
        width: 100%;
    }
    .show-box {
        width: 1100px;
        margin: 0 auto;
        overflow: hidden;
    }
    .show-box {
        margin-top: 50px;
        position: relative;
        padding-top: 30px;
    }
    .left, .right {
        display: inline-block;
        width: 40%;
        height: 20px;
        position: relative;
    }
    .left:before,.right:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0px;
        transform: translateY(-50%);
        width: 100%;
        height: 1px;
        background: #000;
    }
    .text {
        margin: 0px 10px;
        font-size: 30px;
    }
</style>